<template>
  <div class="app-container">
    <div class="right-container">
      <!-- 中间容器：水平排列【左侧内容 + 右侧审核栏】 -->
      <div class="middle-container">
        <!-- 左侧区域：顶部信息 + 风险 + 通话（垂直排列） -->
        <div class="middle-section">
          <!-- 1. 顶部基本信息（替换为自定义卡片） -->
          <div class="top-info">
            <div class="base-cardbase-card">
              <TopInfo :info="topInfo" />
              <!-- 这里放基本信息内容 -->
            </div>
          </div>

          <!-- 2. 风险 + 通话（水平排列） -->
          <div class="section">
            <!-- 风险内容分析 -->
            <div class="risk-section">
              <div class="base-card">
                <RiskAnalysis :riskData="riskData"  />
                <!-- 这里放风险分析内容 -->
              </div>
            </div>

            <!-- 通话记录 -->
            <div class="call-section">
              <div class="base-card">
                <CallRecord :callRecords="callRecords" />
                <!-- 这里放通话记录内容 -->
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧区域：审核记录 + 审核处理 -->
        <div class="audit-section">
          <!-- 审核记录 -->
          <div class="audit-records-card">
            <div class="base-card">
              <AuditRecords :auditRecords="auditRecords" />
              <!-- 这里放审核记录内容 -->
            </div>
          </div>

          <!-- 审核处理 -->
          <div class="audit-handle-card">
            <div class="base-card">
              <AuditHandle  />
              <!-- 这里放审核处理内容 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TopInfo from '@/components/TopInfo/index.vue'
import RiskAnalysis from '@/components/RiskAnalysis/index.vue'
import CallRecord from '@/components/CallRecord/index.vue'
import AuditRecords from '@/components/AuditRecords/index.vue'
import AuditHandle from '@/components/AuditHandle/index.vue'
// 模拟顶部信息数据
const topInfo = {
  customerName: 'xxxxxx',
  businessType: '电话营销',
  callInNumber: '17002802339',
  calledNumber: '13919351179',
  callDuration: 92,
  callTime: '2025-08-05 17:50',
  accessTime: '2025-08-05 19:26',
  outTime: '2025-08-05 19:26',
  vosAccount: 'ZZZ杭州TL对接',
  mainModel: 'DJ-1-Tuili',
  serviceWindow: '服务窗口',
  customerIp: '8.154.45.21'
}

// 模拟风险内容分析数据
const riskData = {
  riskLevel: '风险事件',
  riskType: '疑似诈骗',
  keywords: '银行卡x1',
  hitScripts: '银行卡',
  reportScripts: '更多话术'
}

// 模拟通话记录数据
const callRecords = [
  { id: 1, content: 'So.', time: '0:05', isUser: true },
  { id: 2, content: '你好，请问你是黄有田先生吗？', time: '0:05' },
  { id: 3, content: '哦，你是干嘛的？', time: '0:10', isUser: true },
  { id: 4, content: '啊，先生你好，我这边是怀书的回访部经理，来电呢是后台关注到你，你有在我们平台申请通过一笔是106090的一个额度，这边还有印象吗？', time: '0:20' },
  { id: 5, content: 'Oh', time: '0:50', isUser: true },
  { id: 6, content: '啊，是的，先生啊，因为看到您一直没有完成，最后一步提交审核，就大部分客户呢都申请当月就已经参与进来了。反馈咱们平台提额降息的速度还是很快的，今天和您沟通呢，是', time: '1:00' },
  { id: 7, content: 'Oh', time: '0:50', isUser: true },
  { id: 8, content: '啊，是的，先生啊，因为看到您一直没有完成，最后一步提交审核，就大部分客户呢都申请当月就已经参与进来了。反馈咱们平台提额降息的速度还是很快的，今天和您沟通呢，是', time: '1:00' },
  { id: 9, content: 'Oh', time: '0:50', isUser: true },
  { id: 10, content: '啊，是的，先生啊，因为看到您一直没有完成，最后一步提交审核，就大部分客户呢都申请当月就已经参与进来了。反馈咱们平台提额降息的速度还是很快的，今天和您沟通呢，是', time: '1:00' }
]

// 模拟审核记录数据
const auditRecords = [
  { time: '2025-08-05 22:17', user: 'linlin', content: '没问题', status: '风险可忽略' },
  { time: '2025-08-05 22:18', user: 'linlin', content: '哈哈哈', status: '确认有风险' },
  { time: '2025-08-05 22:18', user: 'linlin', content: '嘻嘻嘻', status: '风险可忽略' },
  { time: '2025-08-06 00:34', user: 'linlin', content: '', status: '风险可忽略' },
  { time: '2025-08-05 22:18', user: 'linlin', content: '嘻嘻嘻', status: '确认有风险' },
  { time: '2025-08-06 00:34', user: 'linlin', content: '', status: '风险可忽略' }
]
</script>


<style lang="scss" scoped>
.app-container {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;

  // 右侧内容容器

  .right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    //padding: 20px;
    gap: 20px;
  }

  // 中间容器（水平布局）

  .middle-container {
    display: flex;
    flex: 1;
    gap: 20px;
    min-height: 0; /* 关键：防止Flex容器溢出 */
  }

  // ----------------- 左侧区域 -----------------

  .middle-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    min-height: 0; // 新增：防止被内部内容撑开
  }

  // 1. 顶部信息（固定高度 200px）

  .top-info {
    height: 200px;

    .base-card {
      height: 100%; // 填充满父容器
    }
  }

  // 2. 风险 + 通话（水平布局，占满剩余高度）

  .section {
    display: flex;
    flex: 1;
    gap: 12px;
    min-height: 0; /* 关键：防止Flex容器溢出 */
  }

  // 风险分析区域

  .risk-section {
    flex: 0 0 32%;
    min-width: 300px;

    .base-card {
      height: 100%; // 填充满父容器
    }
  }

  // 通话记录区域

  .call-section {
    flex: 1;
    min-width: 400px;
    min-height: 0; // 新增：防止 Flex 子元素被内容拉伸

    .base-card {
      height: 100%;
      overflow-y: hidden !important; // 强制生效，覆盖全局 .base-card 的 auto
      padding: 0; // 关键：清除 .base-card 的 padding，避免与 CallRecord 内部 padding 叠加导致高度超出
    }
    }
  }

  // ----------------- 右侧区域 -----------------

  .audit-section {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0; /* 关键：防止Flex容器溢出 */
  }

  // 审核记录（固定高度 400px）

  .audit-records-card {
    height: 600px;

    .base-card {
      height: 100%; // 填充满父容器
    }
  }

  // 审核处理（占满剩余高度）

  .audit-handle-card {
    flex: 1;

    .base-card {
      height: 100%; // 填充满父容器
    }
  }

  // ----------------- 核心：基础卡片样式（圆角、阴影、背景） -----------------

  .base-card {
    background-color: #fff; // 白色背景，模拟卡片
    border-radius: 8px; // 圆角（核心需求）
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 轻微阴影，增强卡片感
    padding: 20px; // 内部间距，避免内容贴边
    box-sizing: border-box; // 确保 padding 不撑大容器
    height: 100%;
    overflow-y: auto; // 新增：内容超出时显示垂直滚动条
    // 可选：滚动条美化（适配现代浏览器）

    &::-webkit-scrollbar {
      width: 6px; // 滚动条宽度
    }

    &::-webkit-scrollbar-thumb {
      background-color: #eee;
      border-radius: 3px;
    }
  }

</style>
